<template>
  <div class="loginBox">
    <div class="orgBox">
      <div class="back" @click="cardBack">
        <svg-icon icon-class="jiantouZuo3" />
      </div>
      <div v-if="userOrgList.length > 0" class="title">
        <span>你可以进入以下组织</span>
      </div>
      <span
        v-else
        style="
          font-size: 18px;
          font-weight: 500;
          margin-top: 100px;
          text-align: center;
        "
        >暂无可进入的组织</span
      >
      <div v-if="userOrgList.length > 0" class="orgs">
        <div
          v-for="(org, index) in userOrgList"
          :key="index"
          class="dept"
          @click="orgSelect(org)"
        >
          <div
            v-if="lastLoginDept && lastLoginDept.p_id == org.dept_id"
            class="orgLast"
          >
            上次登录
          </div>

          <div class="orgTitle">
            <div class="orgHeader">{{ org.dept_name[0] }}</div>
          </div>

          <div class="orgBody">
            <div class="orgName hidden_line">{{ org | deptNameFilter }}</div>
            <div class="orgBy hidden_line">
              {{ org | cityFilter }}
            </div>
          </div>

          <div class="orgSvg">
            <svg-icon
              v-if="org.user_dept_status == 0"
              icon-class="jiantouYou"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";

import { loginLastRecord, userDeptList } from "@/api/login";

export default {
  name: "login",
  props: {},
  components: {},
  filters: {
    // 组织城市位置
    cityFilter(dept) {
      if (dept.org_province) {
        if (dept.org_city) {
          if (dept.org_county) {
            return `${dept.org_province} / ${dept.org_city} / ${dept.org_county}`;
          } else {
            return `${dept.org_province} / ${dept.org_city}`;
          }
        } else {
          return `${dept.org_province}`;
        }
      }
    },

    // 组织名称
    deptNameFilter(dept) {
      if (dept.user_dept_status == 1 || dept.user_dept_status == 2) {
        if (dept.level == 1) {
          return dept.p_name + "-" + dept.dept_name;
        } else {
          return dept.dept_name;
        }
      } else {
        return dept.dept_name;
      }
    },
  },
  data() {
    return {
      lastLoginDept: {},
      userOrgList: {},
    };
  },
  mounted() {
    this.tokenAPI();
  },
  methods: {
    // token的接口
    async tokenAPI() {
      this.userOrgList = [];
      const orgRes = await userDeptList();
      const lastRes = await loginLastRecord();

      if (orgRes.error_code !== 0) {
        return;
      }
      if (lastRes.error_code !== 0) {
        return;
      }
      this.lastLoginDept = lastRes.data || {};
      const orgList = orgRes.data || [];
      this.userOrgList = [...orgList];

      if (this.userOrgList.length === 1) {
        this.orgSelect(this.userOrgList[0]);
      }
    },
    // 卡片变更
    cardBack() {
      store.dispatch("user/logout");
      this.$router.push("/login");
    },

    // ! 选择组织
    orgSelect(org) {
      console.log("orgSelect", org, this.lastLoginDept);
      store.dispatch("user/getOrgInfo", org);

      switch (+org.user_dept_status) {
        case 0:
          const lastOrgId = this.lastLoginDept.p_id;
          const lastDeptId = this.lastLoginDept.dept_id;

          if (lastOrgId == org.dept_id) {
            const deptFind = org.department.find((org) => {
              return org.dept_id == lastDeptId;
            });
            if (deptFind) {
              // 找到上次部门
              store.dispatch("user/setDeptInfo", deptFind);
            } else {
              // 未找到上次部门
              store.dispatch("user/setDeptInfo", org.department[0]);
            }
          } else {
            // 不是上次登录组织
            store.dispatch("user/setDeptInfo", org.department[0]);
          }

          this.$router.push({ path: "/" });

          break;
        default:
          break;
      }
    },
  },
  computed: {},
  watch: {
    account() {
      this.accountError = false;
      this.pwd = null;
      this.pwd = "";
    },
  },
};
</script>

<style lang='scss' scoped>
.loginBox {
  position: relative;
  min-height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-image: url(../../assets/login.png);
  .orgBox {
    width: 400px;
    height: 520px;
    background: #ffffffbf;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    padding: 28px 15px 16px 24px;
    backdrop-filter: blur(8px);
    .back {
      cursor: pointer;
      margin-bottom: 4px;
      width: 32px;
      height: 32px;
      background: #ffffff59;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .svg-icon {
        width: 15.61px;
        height: 11.61px;
      }
      &:hover {
        background: #ffffffbf;
      }
    }
    .title {
      height: 40px;
      font-weight: 500;
      font-size: 18px;
      color: #000000;
      text-align: center;
      line-height: 40px;
      margin-bottom: 8px;
      margin-right: 9px;
    }
    .orgs {
      flex: 1;
      overflow: auto;
      margin-top: 32px;
      padding-right: 6px;
      .dept {
        position: relative;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        cursor: pointer;
        overflow: hidden;
        height: 80px;
        background: #ffffff40;
        border-radius: 16px;
        padding: 16px 20px;
        &:hover {
          background: #ffffffbf;
        }
        .orgLast {
          position: absolute;
          top: 2px;
          left: 24px;
          font-weight: 400;
          font-size: 10px;
          color: #0271e3;
          text-align: center;
          line-height: 12px;
        }
        .orgTitle {
          width: 48px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 16px;
          .orgHeader {
            background-color: #0271e3;
            width: 48px;
            height: 48px;
            font-size: 21px;
            font-weight: 500;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
          }
        }
        .orgBody {
          flex: 1;
          font-size: 17px;
          .orgName {
            font-weight: 500;
            font-size: 16px;
            color: #1d1d1f;
            line-height: 20px;
            margin-bottom: 4px;
            width: 208px;
          }
          .orgBy {
            font-weight: 400;
            font-size: 13px;
            color: #86868c;
            line-height: 20px;
            width: 208px;
          }
        }
        .orgSvg {
          position: absolute;
          right: 20px;
          .svg-icon {
            font-size: 16px;
            color: #1d1d1f;
          }
        }
      }
    }
  }

  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    background: #0897aa;
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
  }
}
</style>